(대표님) archiver 추가, 데이터룸구현

7 files changed, 1741 insertions, 0 deletions

diff --git a/app/[lng]/evcp/(evcp)/data-room/[projectId]/files/page.tsx b/app/[lng]/evcp/(evcp)/data-room/[projectId]/files/page.tsx
new file mode 100644
index 00000000..985e7fef
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/data-room/[projectId]/files/page.tsx
@@ -0,0 +1,14 @@
+// app/projects/[projectId]/files/page.tsx
+import { FileManager } from '@/components/file-manager/FileManager';
+
+export default function ProjectFilesPage({
+  params,
+}: {
+  params: { projectId: string };
+}) {
+  return (
+    <div className="h-full flex flex-col">
+      <FileManager projectId={params.projectId} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/[lng]/evcp/(evcp)/data-room/[projectId]/layout.tsx b/app/[lng]/evcp/(evcp)/data-room/[projectId]/layout.tsx
new file mode 100644
index 00000000..d2e74f8e
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/data-room/[projectId]/layout.tsx
@@ -0,0 +1,19 @@
+// app/projects/[projectId]/layout.tsx
+import { ProjectNav } from '@/components/project/ProjectNav';
+
+export default function ProjectLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { projectId: string };
+}) {
+  return (
+    <div className="flex flex-col h-full">
+      <ProjectNav projectId={params.projectId} />
+      <div className="flex-1 overflow-y-auto">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/app/[lng]/evcp/(evcp)/data-room/[projectId]/members/page.tsx b/app/[lng]/evcp/(evcp)/data-room/[projectId]/members/page.tsx
new file mode 100644
index 00000000..18442c0e
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/data-room/[projectId]/members/page.tsx
@@ -0,0 +1,811 @@
+// app/projects/[projectId]/members/page.tsx
+'use client';
+
+import { use, useState, useEffect, useRef } from 'react';
+import {
+  Users,
+  UserPlus,
+  Crown,
+  Shield,
+  Eye,
+  Edit2,
+  Trash2,
+  Mail,
+  MoreVertical,
+  Search,
+  Filter,
+  Check,
+  ChevronsUpDown,
+  Loader2,
+  UserCog
+} from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Label } from '@/components/ui/label';
+import { useToast } from '@/hooks/use-toast';
+import { cn } from '@/lib/utils';
+import {
+  Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow
+} from '@/components/ui/table';
+import { Separator } from '@/components/ui/separator';
+import { getUsersForFilter } from '@/lib/gtc-contract/service';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+interface Member {
+  id: string;
+  userId: number;
+  user: {
+    name: string;
+    email: string;
+    imageUrl?: string;
+    domain: string;
+  };
+  role: 'owner' | 'admin' | 'editor' | 'viewer';
+  addedAt: string;
+  lastAccess?: string;
+}
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  domain?: string; // 'partners' | 'internal' 등
+}
+
+export default function ProjectMembersPage({
+  params: promiseParams
+}: {
+  params: Promise<{ projectId: string }>
+}) {
+  // Next.js 15+ params Promise 처리
+  const params = use(promiseParams);
+  const projectId = params.projectId;
+
+  const [members, setMembers] = useState<Member[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [roleFilter, setRoleFilter] = useState<string>('all');
+  const [addMemberOpen, setAddMemberOpen] = useState(false);
+  const [editingMember, setEditingMember] = useState<Member | null>(null);
+  
+  // 사용자 선택 관련 상태
+  const [availableUsers, setAvailableUsers] = useState<User[]>([]);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [userSearchTerm, setUserSearchTerm] = useState('');
+  const [userPopoverOpen, setUserPopoverOpen] = useState(false);
+  const [loadingUsers, setLoadingUsers] = useState(false);
+  const [isExternalUser, setIsExternalUser] = useState(false); // 외부 사용자 여부
+  
+  const [newMemberRole, setNewMemberRole] = useState<string>('viewer');
+  const [currentUserRole, setCurrentUserRole] = useState<string>('viewer');
+  const [page, setPage] = useState(1);
+  const pageSize = 20;
+  
+  // Command component key management
+  const userOptionIdsRef = useRef<Record<number, string>>({});
+  const popoverContentId = `popover-content-${Date.now()}`;
+  const commandId = `command-${Date.now()}`;
+
+  const { toast } = useToast();
+
+  useEffect(() => {
+    setPage(1);
+  }, [searchQuery, roleFilter]);
+
+  useEffect(() => {
+    fetchMembers();
+    checkUserRole();
+  }, [projectId]);
+
+  // 다이얼로그가 열릴 때 사용자 목록 가져오기
+  useEffect(() => {
+    if (addMemberOpen) {
+      fetchAvailableUsers();
+    } else {
+      // 다이얼로그가 닫힐 때 초기화
+      setSelectedUser(null);
+      setUserSearchTerm('');
+      setNewMemberRole('viewer');
+      setIsExternalUser(false);
+    }
+  }, [addMemberOpen]);
+
+  const fetchAvailableUsers = async () => {
+    try {
+      setLoadingUsers(true);
+      const users = await getUsersForFilter();
+      // 이미 프로젝트에 있는 멤버는 제외
+      const memberUserIds = members.map(m => m.userId);
+      const filteredUsers = users.filter(u => !memberUserIds.includes(u.id));
+      setAvailableUsers(filteredUsers);
+    } catch (error) {
+      console.error('사용자 목록 로드 실패:', error);
+      toast({
+        title: '오류',
+        description: '사용자 목록을 불러올 수 없습니다.',
+        variant: 'destructive',
+      });
+    } finally {
+      setLoadingUsers(false);
+    }
+  };
+
+  const fetchMembers = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(`/api/projects/${projectId}/members`);
+      const data = await response.json();
+      setMembers(data.member);
+    } catch (error) {
+      toast({
+        title: '오류',
+        description: '멤버 목록을 불러올 수 없습니다.',
+        variant: 'destructive',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const checkUserRole = async () => {
+    try {
+      const response = await fetch(`/api/projects/${projectId}/access`);
+      const data = await response.json();
+      setCurrentUserRole(data.role);
+    } catch (error) {
+      console.error('권한 확인 실패:', error);
+    }
+  };
+
+  const addMember = async () => {
+    if (!selectedUser) {
+      toast({
+        title: '오류',
+        description: '사용자를 선택해주세요.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/projects/${projectId}/members`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userId: selectedUser.id,
+          role: newMemberRole,
+        }),
+      });
+
+      if (!response.ok) throw new Error('멤버 추가 실패');
+
+      toast({
+        title: '성공',
+        description: '새 멤버가 추가되었습니다.',
+      });
+
+      setAddMemberOpen(false);
+      fetchMembers();
+    } catch (error) {
+      toast({
+        title: '오류',
+        description: '멤버 추가에 실패했습니다.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const updateMemberRole = async (memberId: string, newRole: string) => {
+    try {
+      const response = await fetch(`/api/projects/${projectId}/members/${memberId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ role: newRole }),
+      });
+
+      if (!response.ok) throw new Error('역할 변경 실패');
+
+      toast({
+        title: '성공',
+        description: '멤버 역할이 변경되었습니다.',
+      });
+
+      fetchMembers();
+    } catch (error) {
+      toast({
+        title: '오류',
+        description: '역할 변경에 실패했습니다.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const removeMember = async (memberId: string) => {
+    try {
+      const response = await fetch(`/api/projects/${projectId}/members/${memberId}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) throw new Error('멤버 제거 실패');
+
+      toast({
+        title: '성공',
+        description: '멤버가 제거되었습니다.',
+      });
+
+      fetchMembers();
+    } catch (error) {
+      toast({
+        title: '오류',
+        description: '멤버 제거에 실패했습니다.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleSelectUser = (user: User) => {
+    setSelectedUser(user);
+    setUserPopoverOpen(false);
+    
+    // 외부 사용자(partners)인 경우 역할을 viewer로 고정
+    if (user.domain === 'partners') {
+      setIsExternalUser(true);
+      setNewMemberRole('viewer');
+    } else {
+      setIsExternalUser(false);
+      // 내부 사용자는 기본값 viewer로 설정하되 변경 가능
+      setNewMemberRole('viewer');
+    }
+  };
+
+  const formatDateShort = (iso?: string) =>
+    iso ? new Date(iso).toLocaleDateString() : '-';
+
+  const roleConfig = {
+    owner: { label: 'Owner', icon: Crown, color: 'text-yellow-500', bg: 'bg-yellow-50' },
+    admin: { label: 'Admin', icon: Shield, color: 'text-blue-500', bg: 'bg-blue-50' },
+    editor: { label: 'Editor', icon: Edit2, color: 'text-green-500', bg: 'bg-green-50' },
+    viewer: { label: 'Viewer', icon: Eye, color: 'text-gray-500', bg: 'bg-gray-50' },
+  };
+
+  const filteredMembers = members.filter(member => {
+    const matchesSearch = member.user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      member.user.email.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesRole = roleFilter === 'all' || member.role === roleFilter;
+    return matchesSearch && matchesRole;
+  });
+
+  // 사용자 검색 필터링
+  const filteredUsers = availableUsers.filter(user =>
+    user.name.toLowerCase().includes(userSearchTerm.toLowerCase()) ||
+    user.email.toLowerCase().includes(userSearchTerm.toLowerCase())
+  );
+
+  const canManageMembers = currentUserRole === 'owner' || currentUserRole === 'admin';
+
+  const totalPages = Math.max(1, Math.ceil(filteredMembers.length / pageSize));
+  const paginatedMembers = filteredMembers.slice((page - 1) * pageSize, page * pageSize);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="text-center space-y-3">
+          <Loader2 className="h-8 w-8 animate-spin text-primary mx-auto" />
+          <p className="text-sm text-muted-foreground">멤버 목록을 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">프로젝트 멤버</h1>
+          <p className="text-muted-foreground mt-1">
+            프로젝트에 참여 중인 멤버를 관리합니다
+          </p>
+        </div>
+
+        {canManageMembers && (
+          <Button onClick={() => setAddMemberOpen(true)}>
+            <UserPlus className="h-4 w-4 mr-2" />
+            멤버 추가
+          </Button>
+        )}
+      </div>
+
+      {/* 필터 */}
+      <div className="flex items-center gap-3">
+        <div className="relative flex-1 max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="이름 또는 이메일로 검색..."
+            className="pl-9"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+
+        <Select value={roleFilter} onValueChange={setRoleFilter}>
+          <SelectTrigger className="w-40">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">모든 역할</SelectItem>
+            <SelectItem value="owner">Owner</SelectItem>
+            <SelectItem value="admin">Admin</SelectItem>
+            <SelectItem value="editor">Editor</SelectItem>
+            <SelectItem value="viewer">Viewer</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 멤버 목록 (Table) */}
+      <div className="overflow-x-auto">
+        <Table className="[&_td]:py-2 [&_th]:py-2 text-sm">
+          <TableHeader className="sticky top-0 bg-background z-10">
+            <TableRow>
+              <TableHead className="w-[44px]"></TableHead>
+              <TableHead className="w-[100px]">이름</TableHead>
+              <TableHead className="min-w-[150px]">이메일</TableHead>
+              <TableHead className="w-[90px] text-center">구분</TableHead>
+              <TableHead className="w-[140px]">역할</TableHead>
+              <TableHead className="w-[130px]">추가일</TableHead>
+              <TableHead className="w-[150px]">마지막 접속</TableHead>
+              <TableHead className="w-[60px] text-right">액션</TableHead>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {paginatedMembers.length > 0 ? (
+              paginatedMembers.map((member) => {
+                const config = roleConfig[member.role];
+                const Icon = config.icon;
+                const isInternal = member.user.domain !== 'partners';
+
+                return (
+                  <TableRow key={member.id} className="hover:bg-accent/40">
+                    {/* Avatar */}
+                    <TableCell className="align-middle">
+                      <Avatar className="h-8 w-8">
+                        <AvatarImage src={member.user.imageUrl} />
+                        <AvatarFallback>
+                          {member.user.name?.charAt(0).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                    </TableCell>
+
+                    {/* Name */}
+                    <TableCell className="align-middle">
+                      <span className="font-medium">{member.user.name}</span>
+                    </TableCell>
+
+                    {/* Email */}
+                    <TableCell className="align-middle">
+                      <span className="text-muted-foreground">{member.user.email}</span>
+                    </TableCell>
+
+                    {/* Domain */}
+                    <TableCell className="align-middle text-center">
+                      <Badge variant={isInternal ? 'secondary' : 'outline'}>
+                        {isInternal ? 'Internal' : 'Partner'}
+                      </Badge>
+                    </TableCell>
+
+                    {/* Role */}
+                    <TableCell className="align-middle">
+                      {canManageMembers && member.role !== 'owner' && member.user.domain !== 'partners' ? (
+                        <Select
+                          value={member.role}
+                          onValueChange={(v) => updateMemberRole(member.id, v)}
+                        >
+                          <SelectTrigger className="h-8 w-[120px]">
+                            <div className={cn('flex items-center gap-1')}>
+                              <Icon className={cn('h-3 w-3', config.color)} />
+                              <span className={cn('text-xs font-medium')}>
+                                {config.label}
+                              </span>
+                            </div>
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="viewer">Viewer</SelectItem>
+                            <SelectItem value="editor">Editor</SelectItem>
+                            <SelectItem value="admin">Admin</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      ) : (
+                        <div className="inline-flex items-center gap-2">
+                          <div className={cn('px-2 py-1 rounded-full inline-flex items-center gap-1', config.bg)}>
+                            <Icon className={cn('h-3 w-3', config.color)} />
+                            <span className={cn('text-xs font-medium', config.color)}>
+                              {config.label}
+                            </span>
+                          </div>
+                          {member.user.domain === 'partners' && canManageMembers && member.role !== 'owner' && (
+                            <span className="text-xs text-muted-foreground">(고정)</span>
+                          )}
+                        </div>
+                      )}
+                    </TableCell>
+
+                    {/* AddedAt */}
+                    <TableCell className="align-middle">
+                      {formatDateShort(member.addedAt)}
+                    </TableCell>
+
+                    {/* LastAccess */}
+                    <TableCell className="align-middle">
+                      {formatDateShort(member.lastAccess)}
+                    </TableCell>
+
+                    {/* Actions */}
+                    <TableCell className="align-middle">
+                      <div className="flex justify-end">
+                        {canManageMembers && member.role !== 'owner' ? (
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button variant="ghost" size="icon">
+                                <MoreVertical className="h-4 w-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem>
+                                <Mail className="h-4 w-4 mr-2" />
+                                메일 보내기
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem
+                                className="text-red-600"
+                                onClick={() => removeMember(member.id)}
+                              >
+                                <Trash2 className="h-4 w-4 mr-2" />
+                                제거
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        ) : (
+                          <Button variant="ghost" size="icon" disabled>
+                            <MoreVertical className="h-4 w-4" />
+                          </Button>
+                        )}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            ) : (
+              <TableRow>
+                <TableCell colSpan={8} className="h-32 text-center text-muted-foreground">
+                  <div className="flex flex-col items-center justify-center gap-2">
+                    <Users className="h-8 w-8 text-muted-foreground/60" />
+                    <span>검색 결과가 없습니다</span>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      <div className="flex items-center justify-between px-4 py-3 border-t">
+        <div className="text-sm text-muted-foreground">
+          총 {filteredMembers.length}명 · {pageSize}명/페이지
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setPage((p) => Math.max(1, p - 1))}
+            disabled={page === 1}
+          >
+            이전
+          </Button>
+          <span className="text-sm">
+            {page} / {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+            disabled={page === totalPages}
+          >
+            다음
+          </Button>
+        </div>
+      </div>
+
+      {/* 멤버 추가 다이얼로그 */}
+      <Dialog open={addMemberOpen} onOpenChange={setAddMemberOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>멤버 추가</DialogTitle>
+            <DialogDescription>
+              프로젝트에 멤버를 추가합니다
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs defaultValue="internal" className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="internal">내부 사용자</TabsTrigger>
+              <TabsTrigger value="external" className="flex items-center gap-2">
+                외부 사용자
+                <Badge variant="outline" className="ml-1 text-xs">Viewer 전용</Badge>
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="internal" className="space-y-4 mt-4">
+              <div className="space-y-2">
+                <Label htmlFor="internal-user">사용자 선택</Label>
+                
+                {loadingUsers ? (
+                  <div className="flex items-center justify-center py-4">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    <span className="ml-2 text-sm text-muted-foreground">사용자 목록 불러오는 중...</span>
+                  </div>
+                ) : (
+                  <>
+                    <Popover open={userPopoverOpen} onOpenChange={setUserPopoverOpen}>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          aria-expanded={userPopoverOpen}
+                          className="w-full justify-between"
+                        >
+                          <span className="truncate">
+                            {selectedUser && selectedUser.domain !== 'partners' ? (
+                              <div className="text-left">
+                                <div className="font-medium">{selectedUser.name}</div>
+                                <div className="text-xs text-muted-foreground">{selectedUser.email}</div>
+                              </div>
+                            ) : (
+                              "내부 사용자를 선택하세요..."
+                            )}
+                          </span>
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[460px] p-0">
+                        <Command>
+                          <CommandInput
+                            placeholder="이름 또는 이메일로 검색..."
+                            value={userSearchTerm}
+                            onValueChange={setUserSearchTerm}
+                          />
+                          <CommandList
+                            className="max-h-[300px]"
+                            onWheel={(e) => {
+                              e.stopPropagation();
+                              const target = e.currentTarget;
+                              target.scrollTop += e.deltaY;
+                            }}
+                          >
+                            <CommandEmpty>사용자를 찾을 수 없습니다.</CommandEmpty>
+                            <CommandGroup heading="내부 사용자 목록">
+                              {filteredUsers
+                                .filter(u => u.domain !== 'partners')
+                                .map((user) => (
+                                  <CommandItem
+                                    key={user.id}
+                                    onSelect={() => {
+                                      setSelectedUser(user);
+                                      setUserPopoverOpen(false);
+                                      setIsExternalUser(false);
+                                      setNewMemberRole('viewer');
+                                    }}
+                                    value={`${user.name} ${user.email}`}
+                                    className="truncate"
+                                  >
+                                    <Users className="mr-2 h-4 w-4 text-blue-500 flex-shrink-0" />
+                                    <div className="flex-1 truncate">
+                                      <div className="font-medium truncate">{user.name}</div>
+                                      <div className="text-xs text-muted-foreground truncate">{user.email}</div>
+                                    </div>
+                                    <Check
+                                      className={cn(
+                                        "ml-2 h-4 w-4 flex-shrink-0",
+                                        selectedUser?.id === user.id && !isExternalUser ? "opacity-100" : "opacity-0"
+                                      )}
+                                    />
+                                  </CommandItem>
+                                ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+
+                    <p className="text-xs text-muted-foreground">
+                      내부 사용자는 모든 역할을 부여할 수 있습니다.
+                    </p>
+                  </>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="internal-role">역할</Label>
+                <Select 
+                  value={newMemberRole} 
+                  onValueChange={setNewMemberRole}
+                  disabled={!selectedUser || isExternalUser}
+                >
+                  <SelectTrigger id="internal-role">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="viewer">Viewer - 읽기 전용</SelectItem>
+                    <SelectItem value="editor">Editor - 파일 편집 가능</SelectItem>
+                    <SelectItem value="admin">Admin - 프로젝트 관리</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="external" className="space-y-4 mt-4">
+              <div className="rounded-lg bg-amber-50 border border-amber-200 p-3 mb-4">
+                <p className="text-sm text-amber-800">
+                  <strong>보안 정책 안내</strong><br/>
+                  외부 사용자(파트너)는 보안 정책상 Viewer 권한만 부여 가능합니다.
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="external-user">파트너 선택</Label>
+                
+                {loadingUsers ? (
+                  <div className="flex items-center justify-center py-4">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    <span className="ml-2 text-sm text-muted-foreground">사용자 목록 불러오는 중...</span>
+                  </div>
+                ) : (
+                  <Popover open={userPopoverOpen} onOpenChange={setUserPopoverOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={userPopoverOpen}
+                        className="w-full justify-between"
+                      >
+                        <span className="truncate">
+                          {selectedUser && selectedUser.domain === 'partners' ? (
+                            <span className="flex items-center gap-2">
+                              {selectedUser.name}
+                              <Badge variant="outline" className="ml-1 text-xs">외부</Badge>
+                            </span>
+                          ) : (
+                            "외부 사용자를 선택하세요..."
+                          )}
+                        </span>
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[460px] p-0">
+                      <Command>
+                        <CommandInput
+                          placeholder="이름으로 검색..."
+                          value={userSearchTerm}
+                          onValueChange={setUserSearchTerm}
+                        />
+                        <CommandList
+                          className="max-h-[300px]"
+                          onWheel={(e) => {
+                            e.stopPropagation();
+                            const target = e.currentTarget;
+                            target.scrollTop += e.deltaY;
+                          }}
+                        >
+                          <CommandEmpty>파트너를 찾을 수 없습니다.</CommandEmpty>
+                          <CommandGroup heading="파트너 목록">
+                            {filteredUsers
+                              .filter(u => u.domain === 'partners')
+                              .map((user) => (
+                                <CommandItem
+                                  key={user.id}
+                                  onSelect={() => {
+                                    setSelectedUser(user);
+                                    setUserPopoverOpen(false);
+                                    setIsExternalUser(true);
+                                    setNewMemberRole('viewer');
+                                  }}
+                                  value={user.name}
+                                  className="truncate"
+                                >
+                                  <Users className="mr-2 h-4 w-4 text-amber-600" />
+                                  <span className="truncate flex-1">{user.name}</span>
+                                  <Badge variant="outline" className="text-xs mx-2">파트너</Badge>
+                                  <Check
+                                    className={cn(
+                                      "ml-auto h-4 w-4 flex-shrink-0",
+                                      selectedUser?.id === user.id && isExternalUser ? "opacity-100" : "opacity-0"
+                                    )}
+                                  />
+                                </CommandItem>
+                              ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="external-role">역할</Label>
+                <Select value="viewer" disabled>
+                  <SelectTrigger id="external-role" className="opacity-60">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="viewer">Viewer - 읽기 전용 (고정)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </TabsContent>
+          </Tabs>
+
+          <DialogFooter>
+            <Button 
+              variant="outline" 
+              onClick={() => {
+                setAddMemberOpen(false);
+                setSelectedUser(null);
+                setUserSearchTerm('');
+                setNewMemberRole('viewer');
+                setIsExternalUser(false);
+              }}
+            >
+              취소
+            </Button>
+            <Button 
+              onClick={addMember} 
+              disabled={!selectedUser}
+            >
+              추가하기
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/[lng]/evcp/(evcp)/data-room/[projectId]/page.tsx b/app/[lng]/evcp/(evcp)/data-room/[projectId]/page.tsx
new file mode 100644
index 00000000..d54a8cab
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/data-room/[projectId]/page.tsx
@@ -0,0 +1,10 @@
+// app/projects/[projectId]/page.tsx
+import { ProjectDashboard } from '@/components/project/ProjectDashboard';
+
+export default function ProjectPage({
+  params,
+}: {
+  params: { projectId: string };
+}) {
+  return <ProjectDashboard projectId={params.projectId} />;
+}
diff --git a/app/[lng]/evcp/(evcp)/data-room/[projectId]/settings/page.tsx b/app/[lng]/evcp/(evcp)/data-room/[projectId]/settings/page.tsx
new file mode 100644
index 00000000..aa0f3b52
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/data-room/[projectId]/settings/page.tsx
@@ -0,0 +1,488 @@
+
+// app/projects/[projectId]/settings/page.tsx
+'use client';
+
+import { useState, useEffect } from 'react';
+import { 
+  Settings, 
+  Shield, 
+  Globe, 
+  Trash2, 
+  AlertCircle,
+  Save,
+  Lock,
+  Unlock,
+  Archive,
+  Users,
+  HardDrive
+} from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useToast } from '@/hooks/use-toast';
+import { useRouter } from 'next/navigation';
+
+interface ProjectSettings {
+  id: string;
+  name: string;
+  description: string;
+  isPublic: boolean;
+  externalAccessEnabled: boolean;
+  storageLimit: number;
+  maxFileSize: number;
+  allowedFileTypes: string[];
+  autoArchiveDays: number;
+  requireApproval: boolean;
+  defaultCategory: string;
+}
+
+export default function ProjectSettingsPage({ 
+  params 
+}: { 
+  params: { projectId: string } 
+}) {
+  const [settings, setSettings] = useState<ProjectSettings | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [archiveDialogOpen, setArchiveDialogOpen] = useState(false);
+  const [currentUserRole, setCurrentUserRole] = useState<string>('viewer');
+  
+  const { toast } = useToast();
+  const router = useRouter();
+
+  useEffect(() => {
+    fetchSettings();
+    checkUserRole();
+  }, [params.projectId]);
+
+  const fetchSettings = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(`/api/projects/${params.projectId}/settings`);
+      
+      if (!response.ok) {
+        throw new Error('설정을 불러올 수 없습니다');
+      }
+      
+      const data = await response.json();
+      setSettings(data);
+    } catch (error) {
+      toast({
+        title: '오류',
+        description: '프로젝트 설정을 불러올 수 없습니다.',
+        variant: 'destructive',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const checkUserRole = async () => {
+    try {
+      const response = await fetch(`/api/projects/${params.projectId}/access`);
+      const data = await response.json();
+      setCurrentUserRole(data.role);
+    } catch (error) {
+      console.error('권한 확인 실패:', error);
+    }
+  };
+
+  const saveSettings = async () => {
+    if (!settings) return;
+    
+    try {
+      setSaving(true);
+      const response = await fetch(`/api/projects/${params.projectId}/settings`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(settings),
+      });
+
+      if (!response.ok) throw new Error('설정 저장 실패');
+
+      toast({
+        title: '성공',
+        description: '프로젝트 설정이 저장되었습니다.',
+      });
+    } catch (error) {
+      toast({
+        title: '오류',
+        description: '설정 저장에 실패했습니다.',
+        variant: 'destructive',
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const deleteProject = async () => {
+    try {
+      const response = await fetch(`/api/projects/${params.projectId}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) throw new Error('프로젝트 삭제 실패');
+
+      toast({
+        title: '성공',
+        description: '프로젝트가 삭제되었습니다.',
+      });
+
+      router.push('/projects');
+    } catch (error) {
+      toast({
+        title: '오류',
+        description: '프로젝트 삭제에 실패했습니다.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const archiveProject = async () => {
+    try {
+      const response = await fetch(`/api/projects/${params.projectId}/archive`, {
+        method: 'POST',
+      });
+
+      if (!response.ok) throw new Error('프로젝트 보관 실패');
+
+      toast({
+        title: '성공',
+        description: '프로젝트가 보관되었습니다.',
+      });
+
+      router.push('/projects');
+    } catch (error) {
+      toast({
+        title: '오류',
+        description: '프로젝트 보관에 실패했습니다.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const canEdit = currentUserRole === 'owner' || currentUserRole === 'admin';
+
+  if (loading || !settings) {
+    return (
+      <div className="p-6">
+        <div className="animate-pulse space-y-4">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="h-20 bg-gray-200 rounded" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6 max-w-4xl">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">프로젝트 설정</h1>
+          <p className="text-muted-foreground mt-1">
+            프로젝트 설정을 관리합니다
+          </p>
+        </div>
+        
+        {canEdit && (
+          <Button onClick={saveSettings} disabled={saving}>
+            <Save className="h-4 w-4 mr-2" />
+            {saving ? '저장 중...' : '변경사항 저장'}
+          </Button>
+        )}
+      </div>
+
+      {!canEdit && (
+        <Alert>
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            프로젝트 설정을 변경하려면 Owner 또는 Admin 권한이 필요합니다.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <Tabs defaultValue="general">
+        <TabsList>
+          <TabsTrigger value="general">일반</TabsTrigger>
+          <TabsTrigger value="access">접근 관리</TabsTrigger>
+          <TabsTrigger value="storage">스토리지</TabsTrigger>
+          {currentUserRole === 'owner' && (
+            <TabsTrigger value="danger">위험 영역</TabsTrigger>
+          )}
+        </TabsList>
+
+        <TabsContent value="general" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>기본 정보</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <Label htmlFor="name">프로젝트 이름</Label>
+                <Input
+                  id="name"
+                  value={settings.name}
+                  onChange={(e) => setSettings({ ...settings, name: e.target.value })}
+                  disabled={!canEdit}
+                />
+              </div>
+              
+              <div>
+                <Label htmlFor="description">설명</Label>
+                <Textarea
+                  id="description"
+                  value={settings.description}
+                  onChange={(e) => setSettings({ ...settings, description: e.target.value })}
+                  disabled={!canEdit}
+                  rows={3}
+                />
+              </div>
+              
+              <div>
+                <Label htmlFor="category">기본 파일 카테고리</Label>
+                <Select 
+                  value={settings.defaultCategory} 
+                  onValueChange={(value) => setSettings({ ...settings, defaultCategory: value })}
+                  disabled={!canEdit}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="public">Public - 공개</SelectItem>
+                    <SelectItem value="restricted">Restricted - 제한</SelectItem>
+                    <SelectItem value="confidential">Confidential - 기밀</SelectItem>
+                    <SelectItem value="internal">Internal - 내부</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="access" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>접근 설정</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label htmlFor="public">공개 프로젝트</Label>
+                  <p className="text-sm text-muted-foreground">
+                    모든 사용자가 이 프로젝트를 볼 수 있습니다
+                  </p>
+                </div>
+                <Switch
+                  id="public"
+                  checked={settings.isPublic}
+                  onCheckedChange={(checked) => setSettings({ ...settings, isPublic: checked })}
+                  disabled={!canEdit}
+                />
+              </div>
+              
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label htmlFor="external">외부 사용자 접근 허용</Label>
+                  <p className="text-sm text-muted-foreground">
+                    파트너사 사용자도 접근할 수 있습니다
+                  </p>
+                </div>
+                <Switch
+                  id="external"
+                  checked={settings.externalAccessEnabled}
+                  onCheckedChange={(checked) => 
+                    setSettings({ ...settings, externalAccessEnabled: checked })
+                  }
+                  disabled={!canEdit}
+                />
+              </div>
+              
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label htmlFor="approval">멤버 승인 필요</Label>
+                  <p className="text-sm text-muted-foreground">
+                    새 멤버 참여 시 관리자 승인이 필요합니다
+                  </p>
+                </div>
+                <Switch
+                  id="approval"
+                  checked={settings.requireApproval}
+                  onCheckedChange={(checked) => 
+                    setSettings({ ...settings, requireApproval: checked })
+                  }
+                  disabled={!canEdit}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="storage" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>스토리지 설정</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <Label htmlFor="storage-limit">스토리지 제한 (GB)</Label>
+                <Input
+                  id="storage-limit"
+                  type="number"
+                  value={settings.storageLimit}
+                  onChange={(e) => setSettings({ 
+                    ...settings, 
+                    storageLimit: parseInt(e.target.value) 
+                  })}
+                  disabled={!canEdit}
+                />
+              </div>
+              
+              <div>
+                <Label htmlFor="file-size">최대 파일 크기 (MB)</Label>
+                <Input
+                  id="file-size"
+                  type="number"
+                  value={settings.maxFileSize}
+                  onChange={(e) => setSettings({ 
+                    ...settings, 
+                    maxFileSize: parseInt(e.target.value) 
+                  })}
+                  disabled={!canEdit}
+                />
+              </div>
+              
+              <div>
+                <Label htmlFor="auto-archive">자동 보관 (일)</Label>
+                <Input
+                  id="auto-archive"
+                  type="number"
+                  value={settings.autoArchiveDays}
+                  onChange={(e) => setSettings({ 
+                    ...settings, 
+                    autoArchiveDays: parseInt(e.target.value) 
+                  })}
+                  disabled={!canEdit}
+                />
+                <p className="text-sm text-muted-foreground mt-1">
+                  설정한 기간 동안 접근하지 않은 파일을 자동으로 보관합니다
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {currentUserRole === 'owner' && (
+          <TabsContent value="danger" className="space-y-4">
+            <Card className="border-red-200">
+              <CardHeader>
+                <CardTitle className="text-red-600">위험 영역</CardTitle>
+                <CardDescription>
+                  이 작업들은 되돌릴 수 없습니다. 신중하게 진행하세요.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-center justify-between p-4 border rounded-lg">
+                  <div>
+                    <h3 className="font-medium">프로젝트 보관</h3>
+                    <p className="text-sm text-muted-foreground">
+                      프로젝트를 보관하면 읽기 전용이 됩니다
+                    </p>
+                  </div>
+                  <Button 
+                    variant="outline"
+                    onClick={() => setArchiveDialogOpen(true)}
+                  >
+                    <Archive className="h-4 w-4 mr-2" />
+                    프로젝트 보관
+                  </Button>
+                </div>
+
+                <div className="flex items-center justify-between p-4 border rounded-lg border-red-200">
+                  <div>
+                    <h3 className="font-medium text-red-600">프로젝트 삭제</h3>
+                    <p className="text-sm text-muted-foreground">
+                      프로젝트와 모든 파일을 영구적으로 삭제합니다
+                    </p>
+                  </div>
+                  <Button 
+                    variant="destructive"
+                    onClick={() => setDeleteDialogOpen(true)}
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    프로젝트 삭제
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        )}
+      </Tabs>
+
+      {/* 삭제 확인 다이얼로그 */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>프로젝트 삭제</DialogTitle>
+            <DialogDescription className="text-red-600">
+              정말로 이 프로젝트를 삭제하시겠습니까? 
+              모든 파일과 데이터가 영구적으로 삭제됩니다.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
+              취소
+            </Button>
+            <Button variant="destructive" onClick={deleteProject}>
+              삭제
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 보관 확인 다이얼로그 */}
+      <Dialog open={archiveDialogOpen} onOpenChange={setArchiveDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>프로젝트 보관</DialogTitle>
+            <DialogDescription>
+              프로젝트를 보관하시겠습니까? 
+              보관된 프로젝트는 읽기 전용이 되며, 언제든지 복원할 수 있습니다.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setArchiveDialogOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={archiveProject}>
+              보관
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/app/[lng]/evcp/(evcp)/data-room/[projectId]/stats/page.tsx b/app/[lng]/evcp/(evcp)/data-room/[projectId]/stats/page.tsx
new file mode 100644
index 00000000..7f652a99
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/data-room/[projectId]/stats/page.tsx
@@ -0,0 +1,373 @@
+// app/projects/[projectId]/stats/page.tsx
+'use client';
+
+import { use, useState, useEffect } from 'react';
+import { 
+  BarChart3, 
+  TrendingUp, 
+  HardDrive, 
+  Users, 
+  Eye, 
+  Download,
+  Upload,
+  Calendar,
+  FileText,
+  FolderOpen,
+  Activity
+} from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { useToast } from '@/hooks/use-toast';
+import { cn } from '@/lib/utils';
+
+interface ProjectStats {
+  storage: {
+    used: number;
+    limit: number;
+    fileCount: number;
+    folderCount: number;
+    byCategory: {
+      public: number;
+      restricted: number;
+      confidential: number;
+      internal: number;
+    };
+  };
+  activity: {
+    views: number;
+    downloads: number;
+    uploads: number;
+    shares: number;
+    trend: number; // 증감률
+  };
+  users: {
+    total: number;
+    active: number;
+    byRole: {
+      admin: number;
+      editor: number;
+      viewer: number;
+    };
+  };
+  recent: {
+    type: string;
+    user: string;
+    action: string;
+    timestamp: string;
+    details: string;
+  }[];
+}
+
+export default function ProjectStatsPage({ 
+  params 
+}: { 
+  params: Promise<{ projectId: string }> 
+}) {
+  // Next.js 15에서 params를 unwrap
+  const resolvedParams = use(params);
+  const projectId = resolvedParams.projectId;
+  
+  const [stats, setStats] = useState<ProjectStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [dateRange, setDateRange] = useState('30d');
+  const { toast } = useToast();
+
+  useEffect(() => {
+    fetchStats();
+  }, [projectId, dateRange]);
+
+  const fetchStats = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(
+        `/api/projects/${projectId}/stats?range=${dateRange}`
+      );
+      
+      if (!response.ok) {
+        if (response.status === 403) {
+          throw new Error('통계를 볼 권한이 없습니다');
+        }
+        throw new Error('통계 로드 실패');
+      }
+      
+      const data = await response.json();
+      setStats(data);
+    } catch (error: any) {
+      toast({
+        title: '오류',
+        description: error.message || '통계를 불러올 수 없습니다.',
+        variant: 'destructive',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatBytes = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const formatNumber = (num: number) => {
+    return new Intl.NumberFormat('ko-KR').format(num);
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {[...Array(8)].map((_, i) => (
+            <div key={i} className="h-32 bg-gray-200 animate-pulse rounded-lg" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!stats) {
+    return (
+      <div className="p-6 text-center">
+        <BarChart3 className="h-12 w-12 mx-auto mb-3 text-muted-foreground" />
+        <p className="text-muted-foreground">통계를 불러올 수 없습니다</p>
+      </div>
+    );
+  }
+
+  const storagePercentage = (stats.storage.used / stats.storage.limit) * 100;
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">프로젝트 통계</h1>
+          <p className="text-muted-foreground mt-1">
+            프로젝트 사용 현황과 활동 내역을 확인합니다
+          </p>
+        </div>
+        
+        <Tabs value={dateRange} onValueChange={setDateRange}>
+          <TabsList>
+            <TabsTrigger value="7d">7일</TabsTrigger>
+            <TabsTrigger value="30d">30일</TabsTrigger>
+            <TabsTrigger value="90d">90일</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {/* 주요 지표 */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">스토리지 사용량</CardTitle>
+            <HardDrive className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {formatBytes(stats.storage.used)}
+            </div>
+            {/* <Progress value={storagePercentage} className="mt-2" /> */}
+            {/* <p className="text-xs text-muted-foreground mt-1">
+              총 {formatBytes(stats.storage.limit)} 중 {storagePercentage.toFixed(1)}% 사용
+            </p> */}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">파일 수</CardTitle>
+            <FileText className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {formatNumber(stats.storage.fileCount)}
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              폴더 {formatNumber(stats.storage.folderCount)}개 포함
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">활성 사용자</CardTitle>
+            <Users className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {stats.users.active}
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              전체 {stats.users.total}명 중
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">총 다운로드</CardTitle>
+            <Download className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {formatNumber(stats.activity.downloads)}
+            </div>
+            <div className="flex items-center gap-1 mt-1">
+              {stats.activity.trend > 0 ? (
+                <TrendingUp className="h-3 w-3 text-green-500" />
+              ) : (
+                <TrendingUp className="h-3 w-3 text-red-500 rotate-180" />
+              )}
+              <span className={cn(
+                "text-xs",
+                stats.activity.trend > 0 ? "text-green-500" : "text-red-500"
+              )}>
+                {Math.abs(stats.activity.trend)}%
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 상세 통계 */}
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* 파일 카테고리 분포 */}
+        <Card>
+          <CardHeader>
+            <CardTitle>파일 카테고리</CardTitle>
+            <CardDescription>카테고리별 파일 분포</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="h-2 w-2 bg-green-500 rounded-full" />
+                <span className="text-sm">Public</span>
+              </div>
+              <span className="text-sm font-medium">
+                {stats.storage.byCategory.public}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="h-2 w-2 bg-yellow-500 rounded-full" />
+                <span className="text-sm">Restricted</span>
+              </div>
+              <span className="text-sm font-medium">
+                {stats.storage.byCategory.restricted}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="h-2 w-2 bg-red-500 rounded-full" />
+                <span className="text-sm">Confidential</span>
+              </div>
+              <span className="text-sm font-medium">
+                {stats.storage.byCategory.confidential}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="h-2 w-2 bg-blue-500 rounded-full" />
+                <span className="text-sm">Internal</span>
+              </div>
+              <span className="text-sm font-medium">
+                {stats.storage.byCategory.internal}
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 활동 요약 */}
+        <Card>
+          <CardHeader>
+            <CardTitle>활동 요약</CardTitle>
+            <CardDescription>기간별 활동 내역</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Eye className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm">조회수</span>
+              </div>
+              <span className="text-sm font-medium">
+                {formatNumber(stats.activity.views)}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Download className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm">다운로드</span>
+              </div>
+              <span className="text-sm font-medium">
+                {formatNumber(stats.activity.downloads)}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Upload className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm">업로드</span>
+              </div>
+              <span className="text-sm font-medium">
+                {formatNumber(stats.activity.uploads)}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Users className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm">공유</span>
+              </div>
+              <span className="text-sm font-medium">
+                {formatNumber(stats.activity.shares)}
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+{/* 최근 활동 */}
+<Card>
+  <CardHeader>
+    <CardTitle>최근 활동</CardTitle>
+    <CardDescription>프로젝트 내 최근 활동 내역</CardDescription>
+  </CardHeader>
+
+  {/* 패딩이 스크롤에 포함되도록 CardContent p-0 + 내부 래퍼에 패딩 */}
+  <CardContent className="p-0">
+    <div
+      className="max-h-80 md:max-h-96 xl:max-h-[480px] overflow-y-auto px-6 pb-6"
+      style={{ scrollbarGutter: "stable" }} // 스크롤바 생겨도 레이아웃 흔들림 방지
+      aria-label="최근 활동 스크롤 영역"
+      tabIndex={0} // 키보드 포커스 가능
+    >
+      <ul role="list" className="divide-y">
+        {stats.recent.map((activity, index) => (
+          <li key={index} className="flex items-center gap-3 py-3">
+            <Activity className="h-4 w-4 text-muted-foreground shrink-0" />
+            <div className="min-w-0 flex-1">
+              <p className="text-sm">
+                <span className="font-medium">{activity.user}</span>
+                {" "}님이{" "}
+                <span className="font-medium">{activity.details}</span>
+                {activity.action === "upload" && "을(를) 업로드했습니다"}
+                {activity.action === "download" && "을(를) 다운로드했습니다"}
+                {activity.action === "view" && "을(를) 조회했습니다"}
+                {activity.action === "share" && "을(를) 공유했습니다"}
+              </p>
+              <p className="text-xs text-muted-foreground mt-1">
+                {new Date(activity.timestamp).toLocaleString()}
+              </p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </CardContent>
+</Card>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/[lng]/evcp/(evcp)/data-room/page.tsx b/app/[lng]/evcp/(evcp)/data-room/page.tsx
new file mode 100644
index 00000000..4ff56abc
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/data-room/page.tsx
@@ -0,0 +1,26 @@
+// app/projects/page.tsx
+import { Suspense } from 'react';
+import { ProjectHeader } from '@/components/project/ProjectHeader';
+import { ProjectList } from '@/components/project/ProjectList';
+
+export default function ProjectsPage() {
+  return (
+    <div className="min-h-screen">
+      <div className="container mx-auto px-4 py-8 max-w-7xl">
+        <Suspense fallback={<ProjectListSkeleton />}>
+          <ProjectList />
+        </Suspense>
+      </div>
+    </div>
+  );
+}
+
+function ProjectListSkeleton() {
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {[...Array(6)].map((_, i) => (
+        <div key={i} className="h-32 bg-gray-200 animate-pulse rounded-lg" />
+      ))}
+    </div>
+  );
+}
\ No newline at end of file